---
name: useSize
route: /useSize
menu: 'Other'
edit: false
sidebar: true
---

import JackBox from 'jackbox';

import Demo1 from './demo/demo1';
import Demo1Tsx from '!raw-loader!./demo/demo1.tsx';
import Demo1Jsx from '!raw-loader!./demo/demo1.jsx';

import Demo2 from './demo/demo2';
import Demo2Tsx from '!raw-loader!./demo/demo2.tsx';
import Demo2Jsx from '!raw-loader!./demo/demo2.jsx';

import Demo3 from './demo/demo3';
import Demo3Tsx from '!raw-loader!./demo/demo3.tsx';
import Demo3Jsx from '!raw-loader!./demo/demo3.jsx';

# useSize

一个用于监听 dom 节点尺寸变化的 Hook

## 代码演示

### 基本用法

<JackBox tsCode={Demo1Tsx} jsCode={Demo1Jsx} demoName='基本用法' description='使用 ref 监听节点尺寸变化'>
  <Demo1 />
</JackBox>

### 懒加载（用于监听同一组件内后渲染节点）

<JackBox tsCode={Demo2Tsx} jsCode={Demo2Jsx} demoName='懒加载（用于监听同一组件内后渲染节点）' description='传入 function 来监听 dom 节点'>
  <Demo2 />
</JackBox>

### 监听提前渲染节点

<JackBox tsCode={Demo3Tsx} jsCode={Demo3Jsx} demoName='监听提前渲染节点' description='直接传入 dom 节点'>
  <Demo3 />
</JackBox>

## API

```
const [ state, ref? ] = useSize(dom);
```

### Result

| 参数     | 说明                                     | 类型       |
|----------|------------------------------------------|------------|
| state  | dom 节点的尺寸和位置                          | { width: number, height: number }    |
| ref     | 当未传入任何参数时，将 ref 绑定给需监听的节点      | -        |

### Params

| 参数    | 说明                                         | 类型                   | 默认值 |
|---------|----------------------------------------------|------------------------|--------|
| dom? | 可选项，如果未传入则会监听返回结果中的 ref，否则会监听传入的节点  | HTMLElement \| (() => HTMLElement) \| undefined | -      |